<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript">
      window.onload = function () {
        //点击按钮以后添加超链接
        var btn01 = document.getElementById('btn01');

        var ul = document.getElementById('u1');

        btn01.onclick = function () {
          //创建一个li
          var li = document.createElement('li');
          li.innerHTML = '<a href="javascript:;" class="link">新建的超链接</a>';

          //将li添加到ul中
          ul.appendChild(li);
        };

        /* 
          为每一个超链接都绑定一个单击响应函数
          这里我们为每一个超链接都绑定了一个单击响应函数,这种操作比较麻烦
            而且这些操作,只能为已有的超链接设置事件,而新添加的超链接必须重新绑定。
        */
        //获取所有的a
        var allA = document.getElementsByName('a');
        //遍历
        // for (var i = 0; i < allA.length; i++) {
        //   allA[i].onclick = function () {
        //     alert('我是a的单击响应函数!!!');
        //   };
        // }
        /* 
          我们希望,只绑定一次事件,即可应用到多个元素,即使元素是后添加的
            我们可以尝试将其绑定给元素的共同的祖先元素
        */

        //为ul绑定一个单击响应函数
        /* 
          这里会产生事件的冒泡,点击li时,因为ul是li的祖先元素,所以li会触发这个事件


          事件的委派
            - 指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,
              会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件。
            - 事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能。
        */
        ul.onclick = function (event) {
          event = event || window.event;
          /* 
            target
              - event中的target表示的触发事件的对象
          */
          // alert(event.target);

          //如果触发事件的对象是我们期望的元素,则执行否则不执行
          if (event.target.className == 'link') {
            alert('我是ul的单击响应函数');
          }
        };
      };
    </script>
  </head>
  <body>
    <button id="btn01">添加超链接</button>
    <ul id="u1" style="background-color: #bfa">
      <li>
        <p>我是p元素</p>
      </li>
      <li><a href="javascript:;" class="link">超链接一</a></li>
      <li><a href="javascript:;" class="link">超链接二</a></li>
      <li><a href="javascript:;" class="link">超链接三</a></li>
    </ul>
  </body>
</html>
